<template>
    <el-dialog width="500px" title="员工导入" :visible="showExcelDialog" @close="$emit('update:showExcelDialog', false)">
        <el-row type="flex" justify="center">
            <div class="upload-excel">
                <!-- 文件域 -->
                <input 
                    type="file" 
                    ref="excel-upload-input" 
                    class="excel-upload-input" 
                    accept=".xls , .xlsx"
                    @change="uploadChange"
                >
                <div class="drop">
                    <i class="el-icon-upload" />
                    <el-button type="text" @click="getTemplate">下载导入模板</el-button>
                    <span>将文件拖入到此处
                        <el-button type="text" @click="handleUpload">点击上传</el-button>
                    </span>
                </div>
            </div>
        </el-row>

        <el-row type="flex" justify="end">
            <el-button size="mini" type="primary" @click="$emit('update:showExcelDialog', false)">取消</el-button>
        </el-row>

    </el-dialog>
</template>


<script>
import { getExportTemplate, uploadExcel } from '@/api/employee';
import FileSaver from 'file-saver'

export default {
    props: {
        showExcelDialog: {
            type: Boolean,
            default: false
        }
    },
    methods:{
        async getTemplate(){
            // const data = await getExportTemplate()
            const data = 'await getExportTemplate()'
            FileSaver.saveAs(data,'员工导入模板.xlsx')
        },

        handleUpload(){
            // thos.$refs.xxxx  等价 this.$refs['xxxx']
            this.$refs['excel-upload-input'].click()
        },
        async uploadChange(event){
            // 获取input的文件列表
            const files = event.target.files
            if(files.length > 0){
                // 有文件要上传
                const data = new FormData()
                // 将文件参数加入到formData中
                data.append('file',files[0])
                try{
                    // 调用上传接口
                    await uploadExcel(data)
                    // 成功
                    // 通知父组件，上传成功了
                    this.$emit('uploadSuccess')
                    // 通知父组件  关闭弹窗
                    this.$emit('update:showExcelDialog',false)

                    this.$message.success('导入成功~')
                }catch(error){
                    // 捕获到异常
                    console.error('上传异常：',error)
                }finally{
                    // 不论成功与失败都会执行的逻辑
                    this.$refs['excel-upload-input'].value = ''
                }
            }
        }
    }
}
</script>


<style scoped lang="scss">
.upload-excel {
    display: flex;
    justify-content: center;
    margin: 20px;
    width: 360px;
    height: 180px;
    align-items: center;
    color: #697086;

    .excel-upload-input {
        display: none;
        z-index: -9999;
    }

    .btn-upload,
    .drop {
        border: 1px dashed #dcdfe6;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 160px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .drop {
        line-height: 40px;
        color: #bbb;

        i {
            font-size: 60px;
            display: block;
            color: #c0c4cc;
        }
    }
}
</style>